<template>
  <div class="container">
    <div class="content">
      <div class="header">
        <img class="logo" src="../../static/images/logo.png" alt="">
        <p class="logo-name">医疗级引用水机</p>
      </div>
      <div class="share">
        <h3>今日已饮水{{drink_ml}}ml</h3>
        <div class="line"></div>
        <p class="today">今日所需饮水量为{{drink_plane_ml}}ml</p>
        <img class="group" :src="imageUrl" alt="">
        <p class="week">{{title}}</p>
        <p class="tip">您身边的家庭医生</p>
        <p class="tip">帮助您与家人远离疾病！</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      drink_ml: '',
      drink_plane_ml: '',
      imageUrl: '../../static/images/nogroup.png',
      title: '暂时还未点亮勋章，还需要努力呦~',
      machine_user_id: ''
    }
  },
  created () {
    this.machine_user_id = window.location.href.split('=')[1]
    this.$http.get('http://101.132.112.159/share', {params: {'machine_user_id': this.machine_user_id}}).then(resp => {
      if (resp.data.code === 200) {
        this.drink_ml = resp.data.data.drink.drink_ml
        this.drink_plane_ml = resp.data.data.drink.drink_plane_ml
        if (resp.data.data.medal[0]) {
          this.imageUrl = resp.data.data.medal[0].url
          this.title = resp.data.data.medal[0].title
        }
      }
    })
  }
}
</script>

<style scoped>
.container {
  text-align: center;
  width: 100%;
  background: #1e8cd4;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.content {
  max-width: 750px;
  margin: 0 auto;
  color: #fff;
}
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
  border-bottom: #b8dbf1 1px solid;
  margin-bottom: 50px;
}
.logo {
  width: 45%;
  height: 45%;
  padding-right: 20px;
  border-right: #b8dbf1 1px solid;
}
.logo-name {
  padding-left: 20px;
}
.share h3 {
  font-size: 30px;
  font-weight: normal;
  margin-bottom: 20px;
}
.line {
  margin: 0 auto;
  width: 100px;
  border-bottom:#b8dbf1 1px solid;
  margin-bottom: 20px;
}
.today {
  margin-bottom: 20px;
}
.group {
  width: 35%;
  height: 35%;
  margin-bottom: 20px;
}
.week {
  margin-bottom: 20px;
}
.tip {
  margin-bottom: 10px;
  font-size: 20px;
}
</style>
